<!--
 * @Description: 请为你的组件添加相关描述
-->
<template>
  <div class="announce-module">
    <div :id="'content_' + componentId" class="content">
      <div :id="'child_' + componentId" style="white-space: nowrap">
        {{ pageData.content }}
      </div>
    </div>
  </div>
</template>
<script>
import PageServer from '@/servers/page'
import { get, post } from '@/servers/http'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import tool from '@/util/tool'
export default {
  name: 'AnnouncementModule',
  components: {},
  props: {
    componentId: {
      type: String
    },
    activityCode: {
      type: String
    }
  },
  data () {
    return {}
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    pageData () {
      let model = this.pageContent.componentList.find(
        a => a._id === this.componentId
      )
      return { ...model }
    }
  },
  watch: {},
  methods: {
    ...mapMutations('main', ['editComponent']),
    initAnimate () {

      let node = document.getElementById('content_' + this.componentId)
      let child = document.getElementById('child_' + this.componentId)
      let parent = document.getElementsByClassName('announce-module')[0]
      node.style.cssText =
        node.style.cssText + 'padding-left: ' + parent.clientWidth + 'px;'
      let mymove = `@keyframes mymove {
                from {
                    right: 0px;
                  }
                  to {
                    right: ${parent.clientWidth + child.clientWidth}px;
                  }
                }`
      // 创建style标签
      const style = document.createElement('style')
      // 设置style属性
      style.type = 'text/css'
      // 将 keyframes样式写入style内
      style.innerHTML = mymove
      // 将style样式存放到head标签
      document.getElementsByTagName('head')[0].appendChild(style)
    }
  },
  mounted () {
    let _this = this
    this.$nextTick(() => {
      _this.initAnimate()
    })
  }
}
</script>
<style lang="less" scope>
.announce-module {
  .content {
    position: relative;
    display: flex;
    animation: mymove 6s linear infinite;
    white-space: nowrap;
  }
}
</style>
